<template>
	<view class="invite-container">
		<!-- 邀请函卡片 -->
		<view class="invite-card">
			<image class="invite-banner" :src="teamInfo.coverImage|| '/static/images/invite-banner.jpg'"
				mode="aspectFill"></image>
			<view class="invite-content">
				<text class="invite-title">Hi,</text>
				<text class="invite-text">我是{{inviterName}}，现在我正式邀请您加入：</text>
				<text class="team-name">{{teamInfo.name}}</text>
				<text class="invite-desc">和我们一起共享美好的时光！</text>
			</view>
		</view>

		<!-- 底部按钮 -->
		<view class="bottom-btn" v-if="!isJoined">
			<button class="join-btn" @tap="handleJoin">加入球队</button>
		</view>
		<view class="bottom-tip" v-else>
			<text>您已是球队成员</text>
			<button class="home-btn" @tap="goToHome">前往首页</button>
		</view>
	</view>
</template>

<style lang="scss" scoped>
	.invite-container {
		min-height: 100vh;
		background: #f5f5f5;
		padding: 40rpx;
		box-sizing: border-box;
	}

	.invite-card {
		background: #fff;
		border-radius: 20rpx;
		overflow: hidden;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);

		.invite-banner {
			width: 100%;
			height: 700rpx;
		}

		.invite-content {
			padding: 40rpx;

			.invite-title {
				font-size: 40rpx;
				color: #333;
				font-weight: bold;
				margin-bottom: 20rpx;
				display: block;
			}

			.invite-text {
				font-size: 32rpx;
				color: #666;
				margin-bottom: 30rpx;
				display: block;
			}

			.team-name {
				font-size: 36rpx;
				color: #4CAF50;
				font-weight: bold;
				margin: 20rpx 0;
				display: block;
				text-align: center;
			}

			.invite-desc {
				font-size: 28rpx;
				color: #999;
				text-align: center;
				display: block;
			}
		}
	}

	.bottom-btn {
		margin-top: 60rpx;

		.join-btn {
			width: 100%;
			height: 88rpx;
			background: #4CAF50;
			color: #fff;
			border-radius: 44rpx;
			font-size: 32rpx;
			font-weight: bold;
			display: flex;
			align-items: center;
			justify-content: center;

			&:active {
				opacity: 0.8;
			}
		}
	}

	.bottom-tip {
		margin-top: 60rpx;
		text-align: center;
		color: #999;
		font-size: 28rpx;

		.home-btn {
			margin-top: 20rpx;
			color: #4CAF50;
			font-size: 28rpx;
			background: none;

			&:active {
				opacity: 0.8;
			}
		}
	}
</style>

<script>
	import {
		getTeams
	} from '@/api/youqiu/team'
	import {
		addMembers
	} from '@/api/youqiu/members.js'
	export default {
		data() {
			return {
				teamId: '',
				inviterId: '',
				teamName: '',
				inviterName: '',
				isJoined: false,
				teamInfo: {},
				userInfo: {}
			}
		},

		onLoad(options) {
			if (options.teamId) {
				this.teamId = options.teamId
				this.inviterId = options.inviterId
				this.inviterName = options.inviterName
				this.getTeamInfo()
			}
			const storage_data = uni.getStorageSync('storage_data')
			if (storage_data && storage_data.vuex_user_info) {
				this.userInfo = storage_data.vuex_user_info
			} else {
				uni.showToast({
					title: '请先登录',
					icon: 'none'
				})
			}
		},

		methods: {
			getTeamInfo() {
				getTeams(this.teamId).then(res => {
					if (res.code === 200 && res.data) {
						this.teamName = res.data.name
						this.teamInfo = res.data
						
						// 检查当前用户是否已是球队成员
						if (res.data.teamMembers && this.userInfo.userId) {
							const isMember = res.data.teamMembers.some(member => 
								member.userId === this.userInfo.userId
							)
							this.isJoined = isMember
						}
					}
				})
			},

			handleJoin() {
				// 处理加入球队的逻辑
				let data = {
					teamId: this.teamId,
					userId: this.userInfo.userId
				}
				addMembers(data).then(res => {
					console.log(res)
					if(res.code === 200){
						// 显示成功提示
						uni.showToast({
							title: '加入球队成功',
							icon: 'success',
							duration: 2000
						})
						
						// 设置已加入状态
						this.isJoined = true
						
						// 重新获取球队信息
						this.getTeamInfo()
						
						// 延迟一下再刷新页面，让用户看到提示
						setTimeout(() => {
							// 刷新当前页面
							uni.redirectTo({
								url: `/pages/team/invite/index?teamId=${this.teamId}&inviterId=${this.inviterId}&inviterName=${this.inviterName}`
							})
						}, 1500)
					} else {
						uni.showToast({
							title: res.msg || '加入失败',
							icon: 'none'
						})
					}
				}).catch(err => {
					console.error('加入球队失败:', err)
					uni.showToast({
						title: '加入失败，请重试',
						icon: 'none'
					})
				})
			},

			goToHome() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			}
		}
	}
</script>